window.onload = function () {
    var booctx = new Vue({
        el: '.book-ctx',
        data: {
            row: 0,
            col: 0,
            seatRect: {},
            seatType: [
                {
                    name: '单人桌',
                    type: 'single'
                },
                {
                    name: '双人桌(横排)',
                    type: 'double-r'
                },
                {
                    name: '双人桌(竖排)',
                    type: 'double-c'
                },
                {
                    name: '四人桌',
                    type: 'quadra'
                },
                {
                    name: '已售',
                    type: 'selled'
                },
                {
                    name: '已选',
                    type: 'picked'
                }
            ],
            tableInfo: {}
        },
        created: function () {
            // 获取座位数据，数据格式如下所示（这里异步从接口获取如rdata数据格式类型的数据）
            var self = this;
            var rdata = {
                row: 16,
                col: 16,
                // 桌子列表
                seatRect: {
                    1: {
                        // 是否已经被预订
                        isbook: true,
                        // 该桌子座位的坐标和座位类型
                        seatList : [{
                            pos: "1,1",
                            tableType: "quadra"
                        },
                        {
                            pos: "1,2",
                            tableType: "quadra"
                        },
                        {
                            pos: "2,1",
                            tableType: "quadra"
                        },
                        {
                            pos: "2,2",
                            tableType: "quadra"
                        }]
                    },
                    2: {
                        isbook: false,
                        seatList : [{
                            pos: "1,4",
                            tableType: "double-r"
                        },
                        {
                            pos: "1,5",
                            tableType: "double-r"
                        }]
                    },
                    3: {
                        isbook: false,
                        seatList : [{
                            pos: "2,5",
                            tableType: "single"
                        }]
                    },
                    4: {
                        isbook: false,
                        seatList : [{
                            pos: "4,4",
                            tableType: "double-c"
                        },
                        {
                            pos: "5,4",
                            tableType: "double-c"
                        }]
                    },
                    5: {
                        // 是否已经被预订
                        isbook: false,
                        seatList : [{
                            pos: "6,1",
                            tableType: "quadra"
                        },
                        {
                            pos: "6,2",
                            tableType: "quadra"
                        },
                        {
                            pos: "7,1",
                            tableType: "quadra"
                        },
                        {
                            pos: "7,2",
                            tableType: "quadra"
                        }]
                    },
                }
            };
            self.row = rdata.row;
            self.col = rdata.col;
            self.getSeatInfo(rdata.seatRect);
        },
        mounted: function () {
            document.getElementsByClassName('user-wrp')[0].scrollLeft = 300
        },
        methods: {
            getSeatInfo: function (seatData) {
                // 解析位置信息
                var self = this;
                for (var item in seatData) {
                    for (var i=0; i<seatData[item].seatList.length; i++) {
                        if (seatData[item].isbook) {
                            seatData[item].seatList[i].ispick = true;
                            seatData[item].seatList[i].isbook = true;
                            seatData[item].seatList[i].issbook = false;
                            seatData[item].seatList[i].tableIndex = item;
                            Vue.set(self.seatRect, seatData[item].seatList[i].pos, seatData[item].seatList[i]);
                        } else {
                            seatData[item].seatList[i].ispick = true;
                            seatData[item].seatList[i].isbook = false;
                            seatData[item].seatList[i].issbook = false;
                            seatData[item].seatList[i].tableIndex = item;
                            Vue.set(self.seatRect, seatData[item].seatList[i].pos, seatData[item].seatList[i]);
                        }
                    }
                }
            },
            hoverShow: function (index, e) {
                // 点击选择位置
                var self = this;
                if (self.seatRect[index]&&!self.seatRect[index].isbook&&self.seatRect[index].ispick) {
                    var tabIndex = parseInt(self.seatRect[index].tableIndex);
                    for (var item in self.seatRect) {
                        if (parseInt(self.seatRect[item].tableIndex) === tabIndex) {
                            self.seatRect[item].issbook = !self.seatRect[item].issbook;
                        }
                    }
                }
            },
            getTableInfo: function () {
                // 结构化安排座位信息
                var self = this;
                weui.dialog({
                    content: '是否预订？',
                    buttons: [{
                        label: '取消',
                        type: 'default',
                        onClick: function () {
                        }
                    }, {
                        label: '确定',
                        type: 'primary',
                        onClick: function () {
                            var newSeatRect = {};
                            var finalSeatRect = {};
                            var temIndex;
                            var temObj;
                            for (var item in self.seatRect) {
                                if (self.seatRect[item].tableIndex !== undefined) {
                                    self.seatRect[item].pos = item;
                                    temIndex = self.seatRect[item].tableIndex;
                                    temObj = self.seatRect[item];
                                    if (self.seatRect[item].issbook) {
                                        delete temObj.tableIndex;
                                        delete temObj.issbook;
                                        delete temObj.isbook;
                                        delete temObj.ispick;
                                        if (newSeatRect[temIndex]) {
                                            newSeatRect[temIndex].push(self.seatRect[item]);
                                        } else {
                                            newSeatRect[temIndex] = [];
                                            newSeatRect[temIndex].push(self.seatRect[item]);
                                        }
                                    }
                                };
                            }
                            var i = 0;
                            finalSeatRect = newSeatRect;
                            for (var item in newSeatRect) {
                                i ++;
                            }
                            if (i === 0) {
                                alert('请至少选择一个桌子');
                            } else {
                                // 最终结果
                                console.log(finalSeatRect);
                                setTimeout(function () {
                                    window.location.reload();
                                }, 2000);
                            }
                        }
                    }]
                });
            }
        }
    });
};